<template>
  <div class="whole">
    <div class="search-head">
      <van-icon
        name="arrow-left"
        color="white"
        size="18"
        @click="$router.back()"
      />
      <van-search
        v-model="addressValue"
        background="transparent"
        placeholder="请输入小区或地址"
      >
        <template #label>
          <label for="" @click="$router.push('/city')"
            >{{ cname }}&nbsp;<van-icon name="arrow-down"
          /></label>
        </template>
      </van-search>
      <van-icon
        name="location-o"
        size="25"
        @click="$router.push('/map')"
        class="icon-local"
      />
    </div>
    <div class="filter-label" ref="label">
      <van-dropdown-menu active-color="#21b97a">
        <van-dropdown-item title="区域" ref="item" v-model="area">
          <template #default>
            <van-picker
              show-toolbar
              toolbar-position="bottom"
              :columns="areaList"
              ref="picker"
            >
              <template #default>
                <button class="picker-cancel" @click="onConfirm">取消</button>
                <button class="picker-confirm" @click="onConfirm">确认</button>
              </template>
            </van-picker>
          </template>
        </van-dropdown-item>

        <van-dropdown-item title="方式" ref="item2">
          <template #default>
            <van-picker
              show-toolbar
              toolbar-position="bottom"
              :columns="rentTypeList"
            >
              <template #default>
                <button class="picker-cancel" @click="$refs.item2.toggle()">
                  取消
                </button>
                <button class="picker-confirm" @click="$refs.item2.toggle()">
                  确认
                </button>
              </template>
            </van-picker>
          </template>
        </van-dropdown-item>

        <van-dropdown-item title="租金" ref="item3">
          <template #default>
            <van-picker
              show-toolbar
              toolbar-position="bottom"
              :columns="priceList"
            >
              <template #default>
                <button class="picker-cancel" @click="$refs.item3.toggle()">
                  取消
                </button>
                <button class="picker-confirm" @click="$refs.item3.toggle()">
                  确认
                </button>
              </template>
            </van-picker>
          </template>
        </van-dropdown-item>

        <van-dropdown-item title="筛选" @open="showblock">
          <!-- <template #default>
            <van-overlay :show="show" @click="show = false" z-index="99">
              <template #default>
              </template>
            </van-overlay>
          </template> -->
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <div class="houselist">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="(item, index) in houseList"
          :key="index"
          @click="getHouseDetail(item.houseCode)"
        >
          <template #default>
            <div class="singlehouse">
              <div class="houseimg">
                <img
                  :src="'http://liufusong.top:8080' + item.houseImg"
                  alt=""
                />
              </div>
              <div class="houseinfo">
                <h3>{{ item.title }}</h3>
                <p>{{ item.desc }}</p>
                <span class="hao">{{ item.tags[0] }}</span>
                <div class="price">
                  <span>{{ item.price }}</span
                  >&nbsp;元/月
                </div>
              </div>
            </div>
          </template>
        </van-cell>
      </van-list>
    </div>
    <!-- <div class="ceshi" style="height: 1000px"></div> -->
    <div
      class="overmask"
      ref="mask"
      @click.self="hide"
      @mousewheel="$event.preventDefault()"
    >
      <div class="deep-select" ref="selectItem">
        <dl>
          <dt>户型</dt>
          <dd>
            <span
              v-for="item in deepSelectList.roomType"
              :key="item.value"
              @click="ddtoggle"
            >
              {{ item.label }}
            </span>
          </dd>
          <dt>朝向</dt>
          <dd>
            <span
              v-for="item in deepSelectList.oriented"
              :key="item.value"
              @click="ddtoggle"
            >
              {{ item.label }}
            </span>
          </dd>
          <dt>楼层</dt>
          <dd>
            <span
              v-for="item in deepSelectList.floor"
              :key="item.value"
              @click="ddtoggle"
            >
              {{ item.label }}
            </span>
          </dd>
          <dt>房屋亮点</dt>
          <dd>
            <span
              v-for="item in deepSelectList.chara"
              :key="item.value"
              @click="ddtoggle"
            >
              {{ item.label }}
            </span>
          </dd>
        </dl>
        <div class="bottom-btns">
          <button class="bot-clear" @click="clear">清除</button>
          <button class="bot-confirm" @click="hide">确认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCityInfo } from '@/api/city'
import { getHouses, getSearchConditions } from '@/api/search'
export default {
  name: 'search-page',
  data() {
    return {
      show: false,
      activeShow: false,
      addressValue: '',
      cname: JSON.parse(localStorage.getItem('cinfo'))
        ? JSON.parse(localStorage.getItem('cinfo')).label
        : '北京',
      houseList: [],
      loading: false,
      finished: false,
      houserequire: {
        cityId: ''
      },
      area: '',
      areaId: [],
      areaList: [],
      rentTypeList: [],
      priceList: [],
      deepSelectList: {
        roomType: [],
        chara: [],
        floor: [],
        oriented: []
      }
    }
  },
  async created() {
    // 获取城市信息 得到城市id
    const res = await getCityInfo(this.cname)
    // console.log(value)
    this.cityId = res.body.value

    // 通过发送城市id来获取当前城市房子信息
    const house = await getHouses(this.houserequire.cityId)
    console.log(house)
    this.houseList = house.body.list
    console.log(this.houseList)

    // 获取城市下区级数据
    const sub = await getSearchConditions(this.cityId)
    console.log(sub.body)
    this.deepSelectList.chara = sub.body.characteristic
    this.deepSelectList.floor = sub.body.floor
    this.deepSelectList.oriented = sub.body.oriented
    this.deepSelectList.roomType = sub.body.roomType
    console.log(this.deepSelectList)
    // sub.body.area.children.unshift()
    this.areaList.push(sub.body.area)
    this.areaList.push(sub.body.subway)
    this.areaList = JSON.parse(
      JSON.stringify(this.areaList).replace(/label/g, 'text')
    )
    this.areaList[0].children[0].children = [{ text: '' }]
    this.areaList[1].children[0].children = [{ text: '' }]

    console.log(this.areaList)

    // 获取租房方式
    this.rentTypeList = JSON.parse(
      JSON.stringify(sub.body.rentType).replace(/label/g, 'text')
    )
    console.log(this.rentTypeList)

    // 获取价格列表详情
    this.priceList = JSON.parse(
      JSON.stringify(sub.body.price).replace(/label/g, 'text')
    )
    console.log(this.priceList)
  },
  mounted() {
    this.$nextTick(() => {
      // 监听这个dom的scroll事件
      window.addEventListener('scroll', this.handleScroll)
    })
  },
  methods: {
    handleScroll() {
      // console.log(document.documentElement.scrollTop)
      if (document.documentElement.scrollTop > 50) {
        // this.$refs.label.setAttribute('style', 'position:fixed,top:0,left:0,width:100%')
        document.querySelector('.filter-label').style.position = 'fixed'
        document.querySelector('.filter-label').style.top = '0'
        document.querySelector('.filter-label').style.left = '0'
      } else if (document.documentElement.scrollTop < 50) {
        document.querySelector('.filter-label').style.position = 'relative'
      }
    },
    onLoad() {},
    onConfirm() {
      this.$refs.item.toggle()
      this.area = this.$refs.picker.getValues()
      console.log(this.area)
    },
    getHouseDetail(houseCode) {
      window.localStorage.setItem('houseCode', houseCode)
      this.$router.push('/housedetail')
    },
    ddtoggle(e) {
      console.log(e.target.key)
      if (e.target.className === '') {
        e.target.className = 'ddactive'
      } else if (e.target.className === 'ddactive') {
        e.target.className = ''
      }
    },
    hide() {
      this.$refs.mask.style.display = 'none'
      document.documentElement.style.overflow = null
    },
    showblock() {
      this.$refs.mask.style.display = 'block'
      document.documentElement.style.overflow = 'hidden'
    },
    clear() {
      document.querySelectorAll('.deep-select span').forEach((item) => {
        item.className = ''
      })
    }
  },
  watch: {
    area: {
      handler(newValue) {
        console.log(newValue)
      }
    }
  }
}
</script>

<style scoped lang="less">
.search-head {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #21b97a;
  height: 50px;
  width: 100%;
  padding: 0 10px;
}

::v-deep .van-search {
  width: 300px;
  height: 50px;
  margin: 0 15px;
  padding: 0 1px;
  ::placeholder {
    color: rgb(144, 144, 144);
  }
  .van-search__content {
    padding-left: 5px;
  }
  .van-search__label {
    label {
      padding-right: 10px;
      border-right: 0.5px solid rgb(184, 184, 184);
    }
  }
  .van-field {
    padding-left: 8px;
  }
}
.filter-label {
  width: 100%;
  z-index: 3;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}

::v-deep .van-dropdown-menu__bar {
  height: 40px;
}

.icon-local {
  color: white;
}

::v-deep .van-grid-item {
  height: 40px;
}
::v-deep .van-cell {
  padding: 0 15px;
}

.houselist {
  width: 100%;
  position: absolute;
  left: 0;
  top: 92px;
  // padding: 0px 15px;
  // height: 120px;

  .singlehouse {
    display: flex;
    justify-content: left;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    .houseimg {
      img {
        width: 106px;
        height: 80px;
      }
    }
    .houseinfo {
      margin-left: 15px;
      padding-top: 10px;
      h3 {
        font-size: 15px;
        color: #394043;
        line-height: 22px;
        font-family: Microsoft YaHei;
      }
      p {
        font-size: 12px;
        color: #afb2b3;
      }
      .hao {
        display: inline-block;
        font-size: 12px;
        border-radius: 3px;
        padding: 4px 5px;
        margin-right: 5px;
        line-height: 12px;
        color: #39becd;
        background: #e1f5f8;
      }
      .price {
        font-size: 12px;
        color: #fa5741;
        line-height: 23px;
        span {
          font-size: 16px;
          font-weight: 600;
        }
      }
    }
  }
}

.picker-confirm {
  // width: 66%;
  flex: 2;
  height: 50px;
  line-height: 50px;
  // border-top: 1px solid rgb(29, 28, 28);
  background-color: #21b97a;
  color: white;
}

.picker-cancel {
  // width: 33%;
  flex: 1;
  height: 50px;
  line-height: 50px;
  background-color: #fff;
  // border-top: 1px solid rgb(29, 28, 28);
  color: #21b97a;
}

// ::v-deep .van-overlay {
//   position: relative;
// }
.overmask {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 98;
  transition: all 0.3s;
  .deep-select {
    z-index: 99;
    position: fixed;
    top: 0;
    right: 0px;
    width: 300px;
    height: 100%;
    background-color: #fff;
    overflow: scroll;

    dl {
      padding: 0 15px;

      dt {
        margin: 20px 0;
        font-size: 15px;
      }
      dd {
        margin-left: 40px;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 14px;

        span {
          display: inline-block;
          height: 32px;
          width: 70px;
          margin: 0 18px 15px 0;
          border: 1px solid #ddd;
          border-radius: 3px;
          line-height: 32px;
          text-align: center;
          font-size: 12px;
          color: #888;

          &.ddactive {
            border: 1px solid #21b97a;
            color: #21b97a;
            background-color: #defaef;
          }
        }
      }
    }

    .bottom-btns {
      position: fixed;
      bottom: 0;
      right: 0;
      width: 295px;
      display: flex;
      // padding: 0 15px;
      justify-content: center;
      align-items: center;
      font-size: 18px;

      .bot-clear {
        flex: 1;
        background-color: #fff;
        color: #21b97a;
        height: 50px;
      }

      .bot-confirm {
        flex: 2;
        background-color: #21b97a;
        color: white;
        height: 50px;
      }
    }
  }
}
</style>
